<script setup lang="ts">
import { computed } from 'vue'
import type { CardHandle, CardProduct, ListCardProps } from './props'
import { SvgIcon, svgIconfy } from '@/components'

defineOptions({
  name: 'ListCard',
})

const props = withDefaults(defineProps<ListCardProps>(), {
  product: () => ({}) as CardProduct,
  handleList: () => [] as CardHandle[],
})

const cardClass = computed(() => [
  'list-card-item',
  { 'list-card-item__disabled': !props.product?.isSetup },
])

const cardLogoClass = computed(() => [
  'list-card-item_detail--logo',
  { 'list-card-item_detail--logo__disabled': !props.product?.isSetup },
])
</script>

<template>
  <ElCard :class="cardClass">
    <div class="list-card-item_detail bg-white">
      <el-row justify="space-between">
        <div :class="cardLogoClass">
          <SvgIcon v-if="product?.type === 1" name="i-uim:grid" />
          <SvgIcon v-if="product?.type === 2" name="i-uim:microscope" />
          <SvgIcon v-if="product?.type === 3" name="i-uim:left-indent-alt" />
          <SvgIcon v-if="product?.type === 4" name="i-uim:paypal" />
          <SvgIcon v-if="product?.type === 5" name="i-uim:grids" />
        </div>
        <div class="list-card-item_detail--operation">
          <el-tag
            :color="product?.isSetup ? '#00a870' : '#eee'"
            effect="dark"
            class="list-card-item_detail--operation--tag mr-2"
          >
            {{ product?.isSetup ? "已启用" : "已停用" }}
          </el-tag>
          <el-dropdown
            v-if="product && handleList.length"
            trigger="hover"
            :disabled="!product?.isSetup"
            type="success"
          >
            <el-button :disabled="!product?.isSetup" type="primary" plain size="small" :icon="svgIconfy('i-ion:hammer')" />
            <template #dropdown>
              <el-dropdown-menu :disabled="!product?.isSetup">
                <el-dropdown-item v-for="e in handleList" :key="e?.title" @click="e?.click(product)">
                  <el-space :size="2">
                    <SvgIcon size="24px" :name="e?.icon || 'i-akar-icons:edit'" />
                    <el-text>{{ e?.title }}</el-text>
                  </el-space>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-row>
      <p class="list-card-item_detail--name text-text_color_primary">
        {{ product?.name }}
      </p>
      <p class="list-card-item_detail--desc text-text_color_regular">
        {{ product?.description }}
      </p>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.list-card-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;

  &_detail {
    flex: 1;
    min-height: 140px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      font-size: 26px;
      color: #0052d9;
      background: #e0ebff;
      border-radius: 50%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--name {
      margin: 24px 0 8px;
      font-size: 16px;
      font-weight: 400;
    }

    &--desc {
      display: -webkit-box;
      height: 40px;
      margin-bottom: 24px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  &__disabled {
    .list-card-item_detail--name,
    .list-card-item_detail--desc {
      color: var(--el-text-color-disabled);
    }

    .list-card-item_detail--operation--tag {
      color: #bababa;
    }
  }
}
</style>
